<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">

    <title>产业链图谱</title>
    <style>

        .industrial-map-tab {
            padding: 0.1rem 0.24rem;
            background-color: #f6f6f6;
            color: rgba(34, 34, 34, 0.6);
            border-radius: 0.3rem;
            line-height: .56rem;
            height: .56rem;
        }

        .industrial-map-active {
            background: rgba(44, 104, 255, 0.13);
            color: #2C68FF;
            font-weight: bold;
        }

        .industrial-map-menu {
            padding: 0.2rem 0.2rem 0.36rem 0.32rem;
            overflow: hidden;
        }

        .industrial-map-border {
            height: 1.64rem;
            width: 2.1rem;
            border-radius: 0.08rem;
            background-color: white;
            margin-right: 0.26rem;
            margin-top: 0.24rem;
        }

        .industrial-map-img {
            height: 0.64rem;
            width: 0.64rem;
        }

        .industrial-map-name {
            max-width: 1.68rem;
            color: rgba(34, 34, 34, 0.8);
        }

        .industrial-map-chart {
            padding: 0 0.04rem 0.4rem 0.36rem;
        }

        .industrial-map-item {
        }

        .industrial-map-title {
            line-height: .44rem;
            padding-top: .32rem;
            height: .76rem;
        }

        .industrial-map-inside {
            overflow-y: hidden;
            overflow-x: scroll;
            white-space: nowrap;
            display: flex;
            -webkit-overflow-scrolling: touch;
        }

        .industrial-map-inside a {
            text-decoration: none;
        }

        .industrial-map-n {
            color: rgba(34, 34, 34, 0.6);
        }

        .industrial-map-s {
            color: #2C68FF;

        }


    </style>
</head>
<body>
<div class="flex-column h-100-p">
    <!--状态栏-->
    <div class="bg-main status-bar"></div>
    <!--导航栏-->
    <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
        <div class="left-bar" onclick="goBack()">
            <span class="iconfont iconfanhui1 fs16"></span>
        </div>
        <div class="center-bar fs16 ff500 line1">产业链图谱</div>
        <div class="right-bar">
        </div>
    </div>

    <!--二级菜单部分-->
    <div class="flex-row industrial-map-menu bg-white fs12 mescroll-touch">
        <div class="flex-row align-items-center industrial-map-inside mescroll-touch-x"></div>
    </div>

    <!--设备和对应的图-->
    <div class="mescroll flex-1" id="mescroll">
        <div class="flex-column industrial-map-chart"></div>
    </div>

</div>
</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script src="../../plugin/mescroll/js/mescroll.min.js"></script>

<script>
  let pm = {
    index: 0,
    maxIndex: 0,
    lastIndex: 0,
    currHeight: 0,
    oldHeight: 0
  }

  function initPage(params) {
    Utils.sbhAdaptive()

    //下拉刷新、滚动加载
    //meScroll = Template.createNoScroll({
    //  id: 'mescroll', //区域ID
    //  pageNum: 1,
    //  downCallback: getIndustrialChainList, //下拉刷新入口
    //  upCallback: '' //滚动加载入口
    //})
    getIndustrialChainList()

    pageScroll()
  }

  function reLoadPage() {
    getIndustrialChainList()
  }

  // 查询产业链列表
  function getIndustrialChainList() {
    Server.industrialMap.getIndustrialChainList({
      menuCode: '100102'
    }).then(function (data) {
      $('.industrial-map-inside').html('')
      let htmlStr = ''
      if (data.data) {
        data.data.forEach(function (item, index) {
          $('.industrial-map-inside').append('<div><div class=\'flex-row align-items-center justify-content-center industrial-map-tab mapTab' + index + ' mr10 ' + (index === pm.index ? 'industrial-map-active' : '') + ' \'  onclick="jumpChain(this, ' + index + ', true)"    ><a href="javascript:void(0)"  class= \'industrial-map-n  ' + (index === pm.index ? 'industrial-map-s' : '') + '\' >' + item.menuName + '</a></div></div>')
          htmlStr += '<div class=\'industrial-map-item\' id="page-' + index + '">'
          htmlStr += '<div class="industrial-map-title">' + item.menuName + '</div>'
          htmlStr += '<div class=\'flex-row flex-wrap\'>'
          item.infos.forEach(function (it) {
            htmlStr += '<div class=\'industrial-map-border flex-column justify-content-center align-items-center\' onclick="jumpChainDetail(\'' + it.pageUrl + '\',\'' + Utils.dealUndefined(it.industrialName) + '\',\'' + it.industrialCode + '\')">'
            htmlStr += '<div class=\'industrial-map-img\'>'
            htmlStr += '<img class=\'h-100-p w-100-p\' src=\' ' + it.coverImgUrl + ' \'/>'
            htmlStr += ' </div>'
            htmlStr += '<div class=\'industrial-map-name mt5 line1\'>' + Utils.dealUndefined(it.industrialName) + '</div>'
            htmlStr += '</div>'
          })
          htmlStr += '</div></div>'
        })

        pm.maxIndex = data.data.length - 1
      }
      $('.industrial-map-chart').html(htmlStr)

      //下拉刷新结束回调
      //meScroll.endSuccess()
    }).catch((error) => {
      jsBridge.log(error)
      //meScroll.endErr()
    })
  }

  //
  function goBack() {
    jsBridge.closeWindows()
  }

  function jumpChain(that, num, flag) {
    const dom = $('.mescroll')
    if (flag) {
      dom.unbind('scroll')
    }
    $('.industrial-map-tab').removeClass('industrial-map-active')
    $('.industrial-map-tab').eq(num).addClass('industrial-map-active')
    $('.industrial-map-tab a').removeClass('industrial-map-s')
    $('.industrial-map-tab a').eq(num).addClass('industrial-map-s')
    pm.index = num

    //菜单左、右移
    Template.btnLevelMove(that, window.screen.width, 'industrial-map-inside', 'industrial-map-active')
    if (flag) {
      let hei = 5
      for (let i = 0; i < num; i++) {
        hei += $(`#page-${i}`).outerHeight()
      }
      dom.animate({scrollTop: hei + 'px'}, 100, function () {
        pageScroll()
      })
    }
  }

  function jumpChainDetail(url, name, menuCode) {
    jsBridge.openWindow('html/research/industrial-detail.html?name=' + name + '&menuCode=' + menuCode, {}, {noBar: false})
  }

  function pageScroll() {
    let scrollDom = $('.mescroll')
    scrollDom.bind('scroll', function () {
      // 获取滚动高度
      let offset = scrollDom.scrollTop()
      // 累加dom高度,  当前活动的tab
      let height = 0, activeIndex = 0
      for (let i = 0; i <= pm.maxIndex; i++) {
        let domHeight = $(`#page-${i}`).outerHeight()
        height += domHeight
        // 等于的时候属于临界点，临界点跳转到下一个图谱
        if (height > offset) {
          activeIndex = i
          jumpChain($('.mapTab' + activeIndex)[0], activeIndex, false)
          break
        }
      }
    })
  }

</script>
</html>
